<template>
  <div>
    <div class="dashboard-content" style="position:absolute;width:100%;">
      <el-card shadow="none" :body-style="{padding: '0px', position:'absolute', height:'100%', width: '100%'}">
        <div class="card-box clearfix" style="height:100%;">
          <div slot="header" class="clearfix card-title">
            <span>{{content.name}}</span>
            <el-button class="btn-more" type="text">更多 <i class="el-icon-d-arrow-right"></i></el-button>
          </div>
          <template>
            <div>
              <div class="half-legend">
                <span class="circle circle-active"></span><span>{{halfList.HalfLegend1}}</span>
                <span class="circle"></span><span>{{halfList.HalfLegend2}}</span>
              </div>
              <div class="tabs-content-box" style="width: 45%; height: auto!important;float:left;">
                <div class="tableTitle">{{halfList.firstHalfTitle}}</div>
                <div class="progress-bg">
                  <span>{{halfList.firstHalfIncompleted}}</span>
                  <div class="progress-active" :style="'width:'+ halfList.firstHalf "><span>{{halfList.firstHalfCompleted}}</span></div>
                </div>
              </div>
              <div class="tabs-content-box" style="width: 45%; height:auto!important;float:right;">
                <div class="tableTitle">{{halfList.secondHalfTitle}}</div>
                <div class="progress-bg">
                  <span>{{halfList.secondHalfIncompleted}}</span>
                  <div class="progress-active" :style="'width:'+ halfList.secondHalf "><span>{{halfList.secondHalfCompleted}}</span></div>
                </div>
                <div class="sortInfo"><i :class="halfList.sortInfo"></i></div>
              </div>
              <div class="dividing-line"></div>
              <div class="tabs-content-box" style="width: 24%; height:100%;float:left;">
                <v-chart :options="barOption1" :style="{width: '100%', height: '150px'}" :autoresize="true"> </v-chart>
                <div class="detai-bot">
                  <span>控制数:</span><span class="color1">{{halfList.controlNumber1}}</span><br/>
                  <span>执行数:</span><span class="color2">{{halfList.executionNumber1}}</span>
                </div>
              </div>
              <div class="tabs-content-box" style="width: 24%; height:100%;float:left;">
                <v-chart :options="barOption2" :style="{width: '100%', height: '150px'}" :autoresize="true"> </v-chart>
                <div class="detai-bot">
                  <span>控制数: </span><span class="color1">{{halfList.controlNumber2}}</span><br/>
                  <span>执行数: </span><span class="color2">{{halfList.executionNumber2}}</span>
                </div>
              </div>
              <div class="tabs-content-box" style="width: 24%; height:100%;float:left;">
                <v-chart :options="barOption3" :style="{width: '100%', height: '150px'}" :autoresize="true"> </v-chart>
                <div class="detai-bot">
                  <span>控制数: </span><span class="color1">{{halfList.controlNumber3}}</span><br/>
                  <span>执行数: </span><span class="color2">{{halfList.executionNumber3}}</span>
                </div>
              </div>
              <div class="tabs-content-box" style="width: 24%; height:100%;float:left;">
                <v-chart :options="barOption4" :style="{width: '100%', height: '150px'}" :autoresize="true"> </v-chart>
                <div class="detai-bot">
                  <span>控制数: </span><span class="color1">{{halfList.controlNumber4}}</span><br/>
                  <span>执行数: </span><span class="color2">{{halfList.executionNumber4}}</span>
                </div>
              </div>
            </div>
          </template>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
//let echarts = require('echarts/lib/echarts');
import ECharts from '~/static/js/vue-echarts';
import { threePublicFunds } from './data/Content.js';
//import option from '/portal/data/ChartsData.json';
require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');
require('echarts/lib/chart/gauge');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');
export default {
    name: 'threePublicFunds',
    props: ['content'],
    data(){
        return {
            halfList:[],
            barOption1: {},
            barOption2: {},
            barOption3: {},
            barOption4: {}
        };
    },
    components: {
        'v-chart': ECharts
    },
    created:function (){
        this.getHalfList();
    },
    methods: {
        getHalfList(){
            this.$axios.get(threePublicFunds.url5)
                .then(res => {
                    this.halfList = res.data[0];
                });
        }
    },
    mounted() {
        this.$axios.get(threePublicFunds.url1)
            .then(res => {
                this.barOption1 = res.data;
            });
        this.$axios.get(threePublicFunds.url2)
            .then(res => {
                this.barOption2 = res.data;
            });
        this.$axios.get(threePublicFunds.url3)
            .then(res => {
                this.barOption3 = res.data;
            });
        this.$axios.get(threePublicFunds.url4)
            .then(res => {
                this.barOption4 = res.data;
            });
    }
};
</script>
<style scoped lang="scss">
  .card-box {
    
    .color1{
      color:#0066FF;
    }
    .color2{
      color:#E02020;
    }
    .tableTitle{
      font-size:14px;
      font-weight:bold;
      color:#333;
      margin-bottom:6px;
    }
    .progress-bg{
      background:#F0F2F4;
      height:20px;
      width:90%;
      position:relative;
      float:left;

      span{
        color:#666666;
        font-size:12px;
        float:right;
        margin-right:10px;
      }
    }
    .progress-active{
      background:#0066FF;
      height:20px;
      position:absolute;
      top:0px;
      right:10px;
      left:0;

      span{
        color:#FFF;
        font-size:12px;
      }
    }
    .sortInfo{
      color: #E02020;
      float:left;
    }
    .half-legend{
      color:#8C8C8C;
      padding:8px 10px;
      font-size:12px;
      
      span{
        margin-right:10px;
        display:inline-block;
      }
      .circle{
        width:10px;
        height:10px;
        border-radius:10px;
        background:#ddd;
        margin-right:5px;
      }
      .circle-active{
        background:#0061FF;
      }
    }
    .dividing-line{
      border-bottom:1px solid #ddd;
      clear: both;
      height: 10px;
      margin:0 10px;
    }
    .detai-bot{
      text-align:center;
      margin-top:-20px;
    }
  }
</style>
